<template>
  <div class="app-container">
    <div class="ProductionDynamic">
      <!-- 头部 -->
      <div class="ProductionDynamicHeader">
        <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" @Launchform="Launchform" />
      </div>

      <!-- 主体 -->
      <div class="ProductionDynamicMain">
        <el-card class="ProductionDynamicMainCard" shadow="always" :body-style="{ padding: '5px' }">
          <!-- card body -->
          <!-- 表格 -->
          <div class="ProductionDynamicMainCardMain">
            <div style="width: 75%" class="ProductionDynamicMainCardMainLeft">
              <h1 class="MainLeftCardH1">五金库存查询</h1>
              <Table
                @currentRow="clicktogetdata"
                :tableData="TableData"
                :tableHeader="TableHeader"
                :TableHeight="100"
                :outTableHeight="73"
                :isLoading="isLoading"
              />
            </div>

            <!-- 右侧表格 -->
            <div style="margin-left: 15px" class="ProductionDynamicMainCardMainRightT">
              <div class="ProductionDynamicMainCardMainRightTDivOne">
                <h1 class="MainLeftCardH1">入库明细查询</h1>
                <Table
                  :summaryData="summaryData"
                  summary
                  :tableData="inDetailKa"
                  :tableHeader="tableHeader2"
                  :TableHeight="45"
                  :outTableHeight="73"
                  :isLoading="isLoading1"
                />
              </div>
              <div style="margin-top: 20px" class="ProductionDynamicMainCardMainRightTDivTwo">
                <h1 class="MainLeftCardH1">出库明细查询</h1>
                <Table
                  :summaryData="summaryData1"
                  summary
                  :tableData="outDetailKa"
                  :tableHeader="tableHeader3"
                  :TableHeight="45"
                  :outTableHeight="73"
                  :isLoading="isLoading2"
                />
              </div>
            </div>
          </div>

          <!-- 分页器 -->
          <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
        </el-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ConsumableInventory'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import {
  ConsumableInventoryTableData,
  ConsumableInventoryFind,
  outPutAndInPutOfWarehouse
} from '@/api/GeneralManager/Factoryinquiry/ConsumableInventory'
import type { ConsumableParms, TableInterface, inDetail, outDetail } from '@/api/GeneralManager/Factoryinquiry/ConsumableInventory'
import type { formListType } from '@/components/Find/index.vue'

const mtlNoK = ref<string>('')

const formList = ref<any>([
  {
    type: 'select',
    selectLabel: '',
    selectOptions: [],
    selectP: '材料编码'
  },
  {
    type: 'select',
    selectLabel: '',
    selectOptions: [],
    selectP: '材料材料名称'
  },
  {
    type: 'date',
    dateLabel: '入库日期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '收获日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectLabel: '',
    selectOptions: [],
    selectP: '分类'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const isLoading = ref(true)

const isLoading1 = ref(true)

const isLoading2 = ref(true)

const clicktogetdata = (row: any) => {
  isLoading1.value = true
  isLoading2.value = true
  const { mtlNo } = row || {}
  mtlNoK.value = mtlNo
  outIntTable()
}

// 计算总价
const sumQty = (array: any) => {
  return array.reduce((total: any, currentItem: { qty: any }) => total + (currentItem.qty || 0), 0)
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

// 需要收集的数据
const dataCollection = ref<ConsumableParms>({
  inEndDate: '',
  inStartDate: '',
  mtlName: '',
  mtlNo: '',
  outEndDate: '',
  outStartDate: '',
  pageNum: 1,
  pageSize: 40,
  typeNo: ''
})

// 计算金额总数
const summaryData = ref<summaryDataType[]>([
  {
    index: 4,
    num: 0
  }
])

// 计算金额总数
const summaryData1 = ref<summaryDataType[]>([
  {
    index: 4,
    num: 0
  }
])

interface summaryDataType {
  index: number
  num: number | undefined
}

// 表格数据
const TableData = ref<TableInterface[]>()

const ConsumableTableData = async () => {
  isLoading.value = true
  const result = await ConsumableInventoryTableData(dataCollection.value)
  TableData.value = result.dtos
  total.value = result.total
  isLoading.value = false
  const { mtlNo } = result.dtos[0] || {}
  mtlNoK.value = mtlNo
  outIntTable()
}

const inDetailKa = ref<inDetail[]>()

const outDetailKa = ref<outDetail[]>()

const outIntTable = async () => {
  const result = await outPutAndInPutOfWarehouse(mtlNoK.value)
  inDetailKa.value = result.inDetail
  summaryData.value[0].num = sumQty(result.inDetail)
  outDetailKa.value = result.outDetail
  summaryData1.value[0].num = sumQty(result.outDetail)
  isLoading1.value = false
  isLoading2.value = false
}

// 获取表头数据
const GetDepartmentData = async () => {
  let NewArray = []

  const result = await ConsumableInventoryFind()

  formList.value[0].selectOptions = EvaluatesTheArrayReturnValue(Object.keys(result.mtl))

  formList.value[1].selectOptions = EvaluatesTheArrayReturnValue(Object.values(result.mtl))

  NewArray = result.type.reduce<any>((arr, item) => {
    if (item.typeName && item.typeNo) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.typeName + ' ' + item.typeNo)
    }
    return arr
  }, [])
  formList.value[4].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

// 统一调用接口
const interAceFunct = () => {
  // 耗品入库查询
  // ConsumableTableData()

  // Find下拉框数据
  GetDepartmentData()
}

onMounted(() => {
  interAceFunct()
})

const TableHeader = ref([
  {
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '入库日期',
    prop: 'inDate'
  },
  {
    label: '发料日期',
    prop: 'outDate'
  },
  {
    label: '入库数量',
    prop: 'inQty'
  },
  {
    label: '发料数量',
    prop: 'outQty'
  },
  {
    label: '库存数量',
    prop: 'stockQty'
  }
])

const tableHeader2 = ref([
  {
    label: '日期',
    prop: 'slipDate',
    width: '77px'
  },
  {
    label: '单据号码',
    prop: 'slipNo',
    width: '77px'
  },
  {
    label: '单据类型',
    prop: 'slipReason',
    width: '77px'
  },
  {
    label: '厂商',
    prop: 'vendorName',
    width: '77px'
  },
  {
    label: '数量',
    prop: 'qty',
    width: '77px'
  }
])

const tableHeader3 = ref([
  {
    label: '日期',
    prop: 'slipDate',
    width: '77px'
  },
  {
    label: '单据号码',
    prop: 'slipNo',
    width: '77px'
  },
  {
    label: '单据类型',
    prop: 'slipReason',
    width: '77px'
  },
  {
    label: '厂商',
    prop: 'vendorName',
    width: '77px'
  },
  {
    label: '数量',
    prop: 'qty',
    width: '77px'
  }
])

// 分页器
const total = ref(0)
const handleSizeChange = (val: number) => {
  dataCollection.value.pageNum = val
  ConsumableTableData()
}

const handleCurrentChange = (val: number) => {
  dataCollection.value.pageSize = val
  ConsumableTableData()
}

const Launchform = (val: any) => {
  dataCollection.value.mtlNo = val[0].selectValue
  dataCollection.value.mtlName = val[1].selectValue
  dataCollection.value.inStartDate = val[2].dateValue[0]
  dataCollection.value.inEndDate = val[2].dateValue[1]
  dataCollection.value.outStartDate = val[3].dateValue[0]
  dataCollection.value.outEndDate = val[3].dateValue[1]
  dataCollection.value.typeNo = val[4].selectValue?.split(' ')[1]?.trim()
  ConsumableTableData()
}

const findClicked = (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item: any) => {
    if (item.type === 'input') {
      item.inputValue = ''
    } else if (item.type === 'select') {
      item.selectValue = ''
    }
    // Add other conditions for different form item types
  })
}
</script>

<style lang="less" scoped>
.ProductionDynamicMainCardMain {
  display: flex;
  margin: auto;

  .ProductionDynamicMainCardMainLeft {
    width: 80%;
  }
}

h1 {
  font-size: 16px;
}

.ProductionDynamicMain {
  margin-top: 15px;
}
</style>
